import React from 'react';
import { Button, Icon, Slider } from '@alifd/next';
import './index.less'

export default class There extends React.Component{
    render() {
        const slides = [
            { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },
            { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },
            { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },
            { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }
        ];
        
        const itemNodes = slides.map((item, index) => <div key={index} className="slider-img-wrapper"><img draggable={false} src={item.url} alt={item.text} /></div>);
        return (
            <div>
                <Button type="primary" size="large"><Icon type="atm" />Large</Button>&nbsp;&nbsp;
                <Button type="primary"><Icon type="atm" />Medium</Button>&nbsp;&nbsp;
                <Button type="primary" size="small"><Icon type="atm" />Small</Button>
                <br />
                <br />
                <Button.Group size="large">
                    <Button>Button</Button>
                    <Button>Button</Button>
                    <Button>Button</Button>
                </Button.Group>
                <Slider>{itemNodes}</Slider>
            </div>
        )
    }
}